import React from 'react';
import { Table, Tag, Button } from 'antd';
import contextData from '../context/contextData';
import { useContext } from 'react';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
export default function ToduListTb() {
  const context = useContext(contextData);
  // 表格配置
  const config = [
    {
      title: '标题',
      dataIndex: 'title',
      align: 'center',
    },
    {
      title: '日期',
      dataIndex: 'email',
      align: 'center',
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      align: 'center',
      render: (_, record) => (
        <Tag
          color={
            record.priority === 1
              ? 'red'
              : record.priority === 2
              ? 'blue'
              : record.priority === 3
              ? 'gold'
              : ''
          }
        >
          {record.priority}
        </Tag>
      ),
    },
    {
      title: '升降',
      align: 'center',
      render: (_, data) => (
        <>
          <ArrowUpOutlined
            onClick={() => context.locationUp(data)}
            className="top-icon"
          />{' '}
          <ArrowDownOutlined
            onClick={() => context.locationNext(data)}
            className="bottom-icon"
          />
        </>
      ),
    },
    {
      title: '操作',
      align: 'center',
      render: (_, data) => (
        <Button
          type="primary"
          danger
          onClick={() => context.onDelete(data.key)}
        >
          删除
        </Button>
      ),
    },
  ];
  return (
    <>
      <div className="btn">
        <button onClick={() => context.onSort('正')}>正序</button>
        <button onClick={() => context.onSort('倒')}>倒序</button>
      </div>
      <Table bordered columns={config} dataSource={context.dataList} />
    </>
  );
}
